<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>苏宁易购登录页面</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
				padding: 0px;
				margin: 0px;
			}
			
			#top {
				width: 1346px;
				height: 90px;
				/*border: 1px solid;*/
			}
			
			#top #top-center {
				width: 990px;
				height: 90px;
				/*border: 1px solid;*/
				margin: 0px auto;
			}
			
			#top-center #top-center-img {
				width: 189px;
				height: 59px;
				margin-top: 16px;
			}
			
			#top-center a {
				display: inline-block;
				width: 143px;
				height: 18px;
				/*border: 1px solid;*/
				text-decoration: none;
				float: right;
				color: black;
				font-size: 12px;
				margin-top: 60px;
				position: relative;
			}
			
			#top-center .label1:hover {
				color: black;
				text-decoration: underline;
			}
			
			#top-center a .spa {
				display: inline-block;
				width: 18px;
				height: 18px;
				margin-right: 2px;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -144px 157px;
			}
			
			#top-center a .label1 {
				display: inline-block;
				width: 120px;
				height: 18px;
				position: absolute;
				top: 1px;
			}
			
			#center {
				width: 1346px;
				height: 600px;
				/*border: 1px solid;*/
				background-image: url(img/suning_denglu/147066070351027508.jpg);
				background-position: -600px 0px;
			}
			
			#center #center-center {
				width: 990px;
				height: 600px;
				/*border: 1px solid;*/
				margin: 0px auto;
			}
			
			#center #center-center #a {
				/*border: 1px solid;*/
				display: inline-block;
				width: 570px;
				height: 450px;
				margin-top: 50px;
			}
			
			#center #center-center #div {
				width: 386px;
				height: 390px;
				/*border: 1px solid;*/
				float: right;
				margin-top: 50px;
				margin-right: 10px;
				background-color: white;
			}
			
			#center #center-center #div #a1 .spa1 {
				display: inline-block;
				width: 55px;
				height: 55px;
				float: right;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: 0px 55px;
			}
			
			#center #center-center #div #a1 .hiddle-div-head {
				display: none;
				width: 55px;
				height: 55px;
				float: right;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -54px 55px;
			}
			
			#center #center-center #div #div1 {
				width: 338px;
				height: 360px;
				/*border: 1px solid;*/
				margin: 0px auto;
				margin-top: 28px;
			}
			
			#center #center-center #div #div1 #title {
				width: 338px;
				/*border: 1px solid;*/
				font-size: 20px;
				margin-bottom: 45px;
			}
			
			#center #center-center #div #div1 .text {
				width: 338px;
				height: 42px;
				margin-bottom: 22px;
				border: 1px solid;
			}
			
			#center #center-center #div #div1 .text:hover {
				border: 1px solid blue;
			}
			
			/*#center #center-center #div #div1 .text-yzm:hover {
				border: 1px solid blue;
			}*/
			
			#center #center-center #div #div1 .text .text-name {
				width: 300px;
				height: 40px;
				margin-left: 33px;
				border: 0px;
			}
			
			#center #center-center #div #div1 .text .text-head {
				display: inline-block;
				width: 19px;
				height: 20px;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -111px 55px;
				position: absolute;
				top: 250px;
				left: 800px;
			}
			
			#center #center-center #div #div1 .text .text-head1 {
				display: inline-block;
				width: 19px;
				height: 20px;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -111px 114px;
				position: absolute;
				top: 315px;
				left: 800px;
			}
			
			/*#center #center-center #div #div1 .text-yzm {
				width: 172px;
				height: 42px;
				border: 1px solid;
				margin-bottom: 22px;
				/*margin-right: 10px;*/
			}*/
			
			/*#center #center-center #div #div1 .text-yzm .text-head2 {
				display: inline-block;
				width: 17px;
				height: 20px;
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -162px 157px;
				position: absolute;
				top: 380px;
				left: 800px;
			}*/
			
			/*#center #center-center #div #div1 .text-yzm .yzm {
				width: 135px;
				height: 40px;
				border: 0px;
				margin-left: 33px;
			}*/
			
			/*#center #center-center #div #div1 .yzmt {
				width: 85px;
				height: 42px;
				border: 1px solid #999999;
				position: absolute;
				top: 369px;
				left: 980px;
				margin-bottom: 22px;
				text-align: center;
			}*/
			
			#center #center-center #div #div1 .aa {
				width: 46px;
				height: 42px;
				/*border: 1px solid;*/
				font-size: 13px;
				text-align: center;
				line-height: 42px;
				position: absolute;
				top: 369px;
				left: 1090px;
				margin-bottom: 22px;
			}
			
			#center #center-center #div #div1 .aa a {
				text-decoration: none;
			}
			
			#center #center-center #div #div1 .aa a:hover {
				text-decoration: underline;
			}
			
			#center #center-center #div #div1 .text-xz {
				width: 338px;
				margin-bottom: 10px;
			}
			
			#center #center-center #div #div1 .text-xz .spa2 {
				display: inline-block;
				width: 60px;
				font-size: 12px;
			}
			
			#center #center-center #div #div1 .text-xz .text-show {
				width: 240px;
				height: 24px;
				border: 1px solid #FF9C00;
				/*border: 1px solid;*/
				float: right;
			}
			
			#center #center-center #div #div1 .text-xz .text-show .tishi {
				width: 194px;
				font-size: 14px;
				float: right;
			}
			
			#center #center-center #div #div1 .text-xz .text-show #tishi {
				display: inline-block;
				width: 18px;
				height: 17px;
				/*border: 1px solid;*/
				margin-left: 15px;
				margin-top: 2px;
				background-image: url(img/suning_denglu/newMsIcon.png);
				background-position: 660px 210px;
			}
			
			#div1 #denglu {
				display: inline-block;
				width: 338px;
				height: 40px;
				/*border: 1px solid;*/
				text-align: center;
				line-height: 40px;
				text-decoration: none;
				color: white;
				border-radius: 5px;
				font-weight: bold;
				font-size: 20px;
				background-color: #FF9C00;
				margin-bottom: 5px;
			}
			#div1 #denglu:hover{
				display: inline-block;
				background-color: #FFBB00;
			}
			#div1 .zhuce {
				width: 338px;
				/*height: 12px;*/
				/*border: 1px solid;*/
				margin-bottom: 8px;
			}
			
			#div1 .zhuce #zhuce {
				display: inline-block;
				width: 108px;
				/*height: 12px;*/
				font-size: 12px;
				text-decoration: none;
				/*border: 1px solid;*/
				color: #FF9C00;
			}
			
			#div1 .zhuce #zhuce:hover {
				text-decoration: underline;
			}
			
			#div1 .zhuce #mima {
				width: 70px;
				font-size: 12px;
				text-decoration: none;
				color: black;
				float: right;
				/*border: 1px solid;*/
				margin-top: 3px;
				display: inline-block;
			}
			
			#div1 .zhuce #mima:hover {
				text-decoration: underline;
				color: red;
			}
			
			#div1 .center-footer {
				width: 338px;
				height: 36px;
				border-top: 1px solid #C3C3C3;
				/*border: 1px solid;*/
			}
			
			#div1 .center-footer .spa3 {
				width: 100px;
				height: 16px;
				font-size: 12px;
				/*border: 1px solid;*/
				color: #c3c3c3;
				position: absolute;
				top: 467px;
				left: 910px;
				background-color: white;
			}
			
			#div1 .center-footer a {
				display: inline-block;
				text-decoration: none;
				font-size: 13px;
				margin-top: 13px;
				color: black;
				text-align: center;
			}
			
			#div1 .center-footer a:hover {
				text-decoration: underline;
				color: #FF9C00;
			}
			
			#div1 .center-footer #hyk {
				width: 80px;
				border-right: 1px solid #DDDDDD;
			}
			
			#div1 .center-footer #yfb {
				width: 65px;
				border-right: 1px solid #DDDDDD;
			}
			
			#div1 .center-footer #wx {
				width: 60px;
				border-right: 1px solid #DDDDDD;
			}
			
			#div1 .center-footer #qq {
				width: 55px;
				border-right: 1px solid #DDDDDD;
			}
			
			#div1 .center-footer #pptv {
				width: 49px;
			}
			
			#footer {
				width: 1349px;
				height: 145px;
				/*border: 1px solid;*/
				margin-top: 10px;
			}
			
			#footer p {
				width: 990px;
				height: 25px;
				/*border: 1px solid;*/
				margin: 0px auto;
				text-align: center;
				font-size: 12px;
				margin-bottom: 5px;
			}
			
			#footer .footer-p1 {
				margin-top: 5px;
			}
			
			#footer a {
				display: inline-block;
				border-right: 1px solid #C3C3C3;
				text-decoration: none;
				color: black;
				font-size: 12px;
				padding-right: 5px;
			}
			
			#footer a:hover {
				text-decoration: underline;
				color: red;
			}
			
			#footer .last {
				border: 0px;
			}
			
			#footer .footer-p3 {
				color: #999999;
			}
			
			#footer .footer-p3 a {
				border: 0px;
				color: #999999;
				padding-right: 0px;
			}
			
			#footer .footer-div {
				width: 990px;
				height: 25px;
				/*border: 1px solid red;*/
				margin: 0px auto;
				text-align: center;
			}
			
			#footer .footer-div a {
				border: 0px;
			}
			
			#picture {
				display: none;
				width: 338px;
				height: 345px;
				/*border: 1px solid;*/
				z-index: 100;
				position: absolute;
				top: 175px;
				left: 800px;
				background-color: white;
			}
			
			#picture .hiddle-p {
				width: 298px;
				/*height: 20px;*/
				/*border: 1px solid;*/
				margin: 0px auto;
				font-size: 20px;
			}
			
			#picture .hiddle-div {
				width: 338px;
				height: 225px;
				/*border: 1px solid;*/
				/*text-align: center;*/
				padding-top: 35px;
				margin-bottom: 10px;
				/*display: block;*/
				
			}
			#picture .hiddle-div .img1{
				display: inline-block;
				position: absolute;
				top: 60px;
				left: 90px;
				transition: all .5s;
				z-index: 3;
			}
			#picture .hiddle-div .img2{
				display: inline-block;
				position: absolute;
				top: 40px;
				left: 90px;
				display: none;
				transition: all .5s;
				z-index: 2;
			}
			#picture .hiddle-footer {
				width: 338px;
				/*border: 1px solid;*/
				font-size: 12px;
				text-align: center;
			}
			
			#picture .hiddle-wei {
				width: 338px;
				/*border: 1px solid;*/
				text-align: center;
				margin-top: 10px;
			}
			
			#picture .hiddle-span {
				display: inline-block;
				width: 18px;
				height: 14px;
				/*border: 1px solid;*/
				background-image: url(img/suning_denglu/spritesheet.png);
				background-position: -179px 157px;
			}
			
			#picture .hiddle-wei .hiddle-a {
				width: 84px;
				font-size: 12px;
				/*color: black;*/
				text-decoration: none;
			}
			#haha{
				display: none;
				width: 338px;
				font-size: 12px;
				color: red;
				border: 1px solid red;
				position: absolute;
				top: 170px;
				left:795px ;
			}
		</style>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		function yanzheng(){
				var tishi=document.getElementById("haha");
				var pp=document.getElementById("title");
				var mima = document.getElementById("pwd").value;
				var y = document.getElementById("email").value;
				var regphone = /^1[34578][0-9]{9}$/;/*手机号*/
				var regmima = /^[A-z0-9]{4,10}$/;/*密码*/
//				if(){
					if (regphone.test(y)) {
					tishi.style.display="none";
					pp.style.display="block";
					pp.style.color="black";
					
				} else {
					pp.style.color="white";
					tishi.style.display="block";
					tishi.innerHTML = "请输入正确手机号！";
				}
				
//				}
				/*else if(){
					
				}*/
				
				
			     if(regmima.test(mima) == true) {
					tishi.style.display="none";
					pp.style.display="block";
					pp.style.color="black";
				} else {
					pp.style.color="white";
					tishi.style.display="block";
					tishi.innerHTML = "密码为4-16字符，请正确输入！";
				}
			}
		//公共场合不适合登录
		var count=0;
		$(function(){
			//公共场合不适合登录
			$(".dianji").click(function() {
					count++;
					if(count%2==0){
						$(".text-show").css("display","block");
					}
					else{
						$(".text-show").css("display","none");
					}
				});
				//点击二维码
				$(".spa1").click(function() {
					count++;
					if(count%2==0){
						$(".hiddle-div-head").css("display","none");
						$(".spa1").css("display","block");
						$("#picture").css("display","none");
					}
					else{
						$(".hiddle-div-head").css("display","block");
						$(".spa1").css("display","none");
						$("#picture").css("display","block");
					}
				});
				$(".hiddle-div-head").click(function() {
					count++;
					if(count%2==0){
						$(".spa1").css("display","block");
						$(".hiddle-div-head").css("display","none");
						$("#picture").css("display","none");
						
					}
					else{
						$(".spa1").css("display","none");
						$(".hiddle-div-head").css("display","block");
						$("#picture").css("display","block");
					}
				});
				//二维码图片浮动
				$(".img1").mouseover(function(){
					$(".img2").css("display","block");
					$(".img1").css("left","40px");
					$(".img2").animate({
						left:"200px",
					},200);
				}).mouseout(function(){
					$(".img1").css("left","90px");
					$(".img2").animate({
						left:"90px",
					},200);
					$(".img2").css("display","none");
				})
		});
		</script>
	</head>

	<body>
		<div id="top">
			<div id="top-center">
				<img src="img/suning_denglu/h-img.png" id="top-center-img" />
				<a href="#">
					<span class="spa"></span>
					<label class="label1">我想对“登录”提意见</label>
				</a>
			</div>
		</div>
		<div id="center">
			<div id="center-center">
				<a href="#" id="a"></a>
				<div id="div">
					<a href="#" id="a1"><span class="spa1"></span>
						<div class="hiddle-div-head"></div>
					</a>
					<div id="picture">
						<p class="hiddle-p">手机扫码，安全登录</p>
						<div class="hiddle-div">
							<img class="img1" src="img/suning_denglu/qrLoginUuidGenerate.png" />
							<img class="img2" src="img/suning_denglu/qrcode-way.png" />
						</div>
						<p class="hiddle-footer">请使用易购客户端扫描二维码登录
						</p>
						<div class="hiddle-wei">
							<span class="hiddle-span"></span>
							<a href="#" class="hiddle-a">下载易购客户端</a>
						</div>
					</div>
					<div id="div1">
						<p id="title">
							欢迎登录
							<div id="haha"></div>
						</p>
						<div class="text">
							<span class="text-head"></span>
							<input type="text" class="text-name" id="email" placeholder="用户名/手机/邮箱/门店会员卡号"/>
						</div>
						<div class="text">
							<span class="text-head1"></span>
							<input type="password" class="text-name" id="pwd" placeholder="密码" />
						</div>
						<!--<div class="text-yzm">
							<span class="text-head2"></span>
							<input type="text" class="yzm" placeholder="验证码" />
						</div>
						<div class="yzmt">
							<img src="img/suning_denglu/imageCode.jpg" />
						</div>
						<div class="aa">
							<a href="#">换一张</a>
						</div>-->
						<div class="text-xz">
							<input class="dianji" type="checkbox" checked="checked" style="margin-bottom: 0px;" />
							<span class="spa2">自动登录</span>
							<div class="text-show">
								<span id="tishi"></span>
								<p class="tishi">公共场合不建议登录！</p>
							</div>
						</div>
						<!--<div class="denglu">-->
						<a href="#" id="denglu" onclick="yanzheng()">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
						<!--</div>-->
						<div class="zhuce">
							<a href="suning_zhuce.html" id="zhuce">免费注册，有惊喜></a>
							<a href="#" id="mima">忘记密码？</a>
						</div>
						<div class="center-footer">
							<a href="#" id="hyk">门店会员卡</a>
							<a href="#" id="yfb">易付宝</a>
							<a href="#" id="wx">微信</a>
							<a href="#" id="qq">QQ</a>
							<a href="#" id="pptv">PPTV</a>
							<span class="spa3">使用以下账号登录</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<p class="footer-p1">
				<a href="#">苏宁元商</a>
				<a href="#">苏宁互联</a>
				<a href="#">苏宁金融</a>
				<a href="#">易付宝</a>
				<a href="#">PPTV</a>
				<a href="#">红孩子</a>
				<a href="#">缤购</a>
				<a href="#">乐购仕</a>
				<a href="#">苏宁物流</a>
				<a href="#">苏宁美国</a>
				<a href="#">苏宁香港</a>
				<a href="#" class="last">手机苏宁</a>
			</p>
			<p class="footer-p2">
				<a href="#">关于苏宁易购</a>
				<a href="#">联系我们</a>
				<a href="#">诚聘英才</a>
				<a href="#">供应商入驻</a>
				<a href="#">苏宁联盟</a>
				<a href="#">苏宁招标</a>
				<a href="#">友情链接</a>
				<a href="#">法律声明</a>
				<a href="#">用户体验提升计划</a>
				<a href="#" class="last">股东会员认证</a>
			</p>
			<p class="footer-p3">
				Copyright© 2002-2016 ，苏宁云商集团股份有限公司版权所有
				<a href="#">苏ICP备10207551号-4</a>
				<a href="#">苏B1-20130131</a>
				<a href="#">苏B2-20130376</a>
				<a href="#">苏B2-20130391</a>
				出版物经营许可证新出发苏批字第A-243号
			</p>
			<div class="footer-div">
				<a href="#"><img src="img/suning_denglu/chengxin.png" /></a>
				<a href="#"><img src="img/suning_denglu/unicom.png" /></a>
				<a href="#"><img src="img/suning_denglu/dianxin.jpg" /></a>
				<a href="#"><img src="img/suning_denglu/dianzi.png" /></a>
			</div>
		</div>
	</body>

</html>